<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in items"  :key="index">{{index}}-{{item.message}} </li>
        </ul>
        <ul>
            <li v-for ="(value,key,index) in object" :key="index">{{index}}-{{key}} :{{value}} </li>
        </ul>

        <div>
            <ul>
                <li v-for="(t,i) in provinces" :key="i">
                    {{t.name}} - {{i}} 
                    <ol>
                        <li v-for="(e,x) in t.cities" :key ="x">{{e.name}} - {{x}} </li>
                    </ol>
                </li>
            </ul>
        </div>

    </div>
    
</body>
<!-- 
    v-for 列表渲染 , 指令可以渲染数组和对象
    v-for = "(item , index ) in items" v-bind:key = "index"  遍历数组  index 是角标  item 是角标所对应的值
    v-for = "(value , key ,index ) in object"   遍历对象  index 是下标  key 是键值  value 是jianming

    key 为了给Vue一个提示 , 以便它能跟踪每个节点的身份 , 从而重用和重新排序现有元素 , 需要为每项提供一个唯一的 key 属性


    深拷贝 浅拷贝
    ... (展开运算)        JSON.parse     递归   都是深拷贝


    深复制  浅复制 
    

    深监听  浅监听


    数据类型
    基本数据类型  String  Number  Boolean  null  undefined  =>  (深拷贝)
    引用数据类型   Object Array   =>  (浅拷贝)


    不可变对象  immutable  修改不可变对象,响应式系统一定会检测到数据更新  => (基本数据类型)
    可变对象   mutable  修改可变对象,可能响应式系统无法检测到数据更新  => (引用数据类型)
    Vue 响应式视图 , 可以检测不可变对象的数据修改 , 可变对象有时候监测不到 . (响应式视图系统会监测可变对象第一层的数据改变)
    就是说 , 修改基本的数据类型 , 会触发视图的更新
             修改引用数据类型 , 可能会触发视图更新


    数组的方法
    变异数组的方法 :   这些方法会直接修改原来的数组
    push        往数组末尾处追加数据，可追加多个数据
    pop         删除数组最后一个数据，只能删除一个数据
    shift       删除数组最前面一个数据，只能删除一个数据
    unshift     在数组最前面追加一个数据，可追加多个数据
    splice
        删除 splice(index,howmany) =>index 是从第几个开始删除的角标  howmany 是删除的个数
        插入 splice(index,0,item1,item2...) => index 是从第几个开始插入的角标  item 是插入的数据
        替换 splice(index,howmany,item1,item2...) => index 是从第几个开始替换  howmany  是替换多少个  item 是替换的数据
    sort       排序
    reverse    翻转


    非变异的数组方法  :  这些方法不能改变原始的数组  但可以返回一个新的数组
    map
    reduce
    forEach
    filter
    find
    some
    every
    concat
    slice




 -->
<script>
    var provinces = [{
            name: "浙江",
            cities: [{
                name: '金华',
            }, {
                name: '杭州'
            }, {
                name: '温州'
            }, ]
        }, {
            name: "湖北",
            cities: [{
                name: '武汉'
            }, {
                name: '襄樊'
            }, {
                name: '黄冈'
            }, ]
        }, {
            name: "江苏",
            cities: [{
                name: '南京'
            }, {
                name: '徐州'
            }, {
                name: '连云港'
            }, ]
        }];
        var cars = {
            car01 : {brand : "Ford", model : "Mustang", color : "red"},
            car02 : {brand : "Fiat", model : "500", color : "white"},
            car03 : {brand : "Volvo", model : "XC90", color : "black"}
        }
    const vm = new Vue({
        el :"#app",
        data:{
            items: [
                { message: 'Vue' },
                { message: 'React' },
                { message: 'Node' },
            ],
            object: {
                title: 'How to do lists in Vue',
                author: 'Jane Doe',
                publishedAt: '2016-04-10'
            },
            provinces,
            cars,
        }
    })
</script>
</html>